<template>
  <view>
    <view class="shiniandayun-containter">
      <view class="shiniandayun-title" style="background-color: #f6f6f6">十年大运</view>
      <view class="shiniandayun-detail">
        <view class="shiniandayun-item">
          <view class="shiniandayun_content shiniandayun-item-title shinian-dayun-title">大运</view>
          <view class="shiniandayun_content shiniandayun-item-title shinian-dayun-title"
            style="background-color: #f6f6f6">十神</view>
          <view class="shiniandayun_content shiniandayun-item-title">星运</view>
          <!-- <view class="shiniandayun_content shiniandayun-item-title" style="background-color: #f6f6f6;">流年</view> -->
          <view class="shiniandayun_content shiniandayun-item-title" style="background-color: #f6f6f6">虚岁</view>
        </view>
        <template v-for="(item, index) in shiniandayun.dayun">
          <view class="shiniandayun-item" :key="index">
            <view class="shiniandayun_content shinian-dayun">
              <view :class="[
                        liunianIndex == index ? 'dayun-select' : 'dayun-noselect',
                      ]" @click="clickLiunian(item.nianfen, index)">
                <view>{{ item.nianfen }}</view>
                <view>
                  <span :style="fiveElementInfo(item.dayunArr[0]).color">{{
                          item.dayunArr[0]
                        }}</span>
                  <span :style="fiveElementInfo(item.dayunArr[1]).color">{{
                          item.dayunArr[1]
                        }}</span>
                </view>
              </view>
            </view>
            <view class="shiniandayun_content shinian-shishen" style="background-color: #f6f6f6">
              <view style="color: red">{{ item.shishen }}</view>
              <view style="color: red">{{ item.cangganshishen }}</view>
            </view>
            <view class="shiniandayun_content">{{ item.dishi }}</view>
            <!-- <view class="shiniandayun_content" style="background-color: #f6f6f6;">{{item.nianfen}}</view> -->
            <view class="shiniandayun_content" style="background-color: #f6f6f6">{{ item.niansui }}岁</view>
          </view>
        </template>
      </view>
    </view>
    <view class="liunian-containter">
      <view class="shiniandayun-item-title shinian-dayun-title">流年</view>
      <view class="liunian-item" v-for="(item, index) in liunianDetail" :key="index">
        <view>{{ item.year }}</view>
        <view>
          <span :style="fiveElementInfo(item.ganzhiArr[0]).color">{{
                  item.ganzhiArr[0]
                }}</span>
          <span :style="fiveElementInfo(item.ganzhiArr[1]).color">{{
                  item.ganzhiArr[1]
                }}</span>
        </view>
        <view style="color: red">{{ item.shishen }}</view>
        <view style="color: red">{{ item.cangganshishen }}</view>
      </view>
    </view>
    <view class="fucaixigui-containter">
      <block>
        <view class="fucaixigui_item" v-for="(item, index) in fucaixiguiNames" :key="index">
          <view class="fucaixigui_title">{{ fucaixiguiNames[index] }}</view>
          <view class="fucaixigui_content">{{ fucaixigui[index] }}</view>
        </view>
      </block>
    </view>
  </view>
</template>

<script>
  import wuxingColor from '@/utils/wuxing.js'
  import { baziCalc, getLiunianData } from "./js/bazi";
  export default {
    props: {
      result: {
        type: Object,
        default: {}
      }
    },
    data() {
      return {
        baziResult: this.result,
        sizhupinyin: {},
        shiniandayun: "",
        // 流年详细列表
        liunianIndex: 0,
        liunianDetail: "",
        fucaixiguiNames: ["福神", "财神", "喜神", "男贵人", "女贵人"],
        fucaixigui: ""
      }
    },
    mounted() {
      let param = {
          name: this.result.userName,  // 姓名
          sex: this.result.sex == "男" ? 0 : 1,  // 性别
          place: this.result.area,  // 地区
          birthday: this.result.trueSolarTime ||  this.result.birthDay,  // 用户选择时间
          isSolar: '0',  // 是否选择真太阳时  0:否 1:是
      }
      let result = baziCalc(param);
      this.sizhupinyin = result.sizhupinyin;
      this.shiniandayun = result.shiniandayun;
      this.liunianDetail = result.liunianDetail;
      this.fucaixigui = result.fucaixigui;
    },
    methods: {
      // 对应五行信息
      fiveElementInfo(str) {
        let {
          color,
          img
        } = wuxingColor.getGanzhiWuxingColorInfo(str);
        return {
          color: `color: ${color}`,
          img: `/static/images/bazi/fortune/${img}`,
        }
      },
      clickLiunian(item, index) {
        this.liunianIndex = index ? index : 0;
        this.liunianDetail = getLiunianData(item, this.sizhupinyin);
      }
    }
  }
</script>

<style lang="scss" scoped>

.shiniandayun-containter {
  display: flex;
  flex-direction: column;
  color: #4b240d;
}

.shiniandayun-title {
  font-size: 36rpx;
  color: #808080;
  display: flex;
  padding: 13rpx;
  font-weight: bolder;
  justify-content: center;
}

.shiniandayun-detail {
  display: flex;
  flex-direction: row;
  font-size: 22rpx;
  line-height: 58rpx;
}

.shiniandayun-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 0;
  white-space: nowrap;
}
.shiniandayun-item:last-child .shiniandayun_content {
  padding-right: 44rpx;
}

.shiniandayun_content {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  text-align: center;
  font-weight: bolder;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.shiniandayun-item-title {
  color: #6e512e;
  font-size: 28rpx;
  line-height: 56rpx;
  font-weight: bold;
  white-space: nowrap;
  padding: 0px 8rpx 0 44rpx;
  color: rgb(128, 128, 128);
}
.dayun-select {
  box-sizing: border-box;
  background-color: #c5a680;
  border-radius: 6rpx;
  padding-top: 0;
  padding-bottom: 0;
  padding: 0 4rpx;
}
.dayun-noselect {
  box-sizing: border-box;
  border-radius: 6rpx;
  padding-top: 0;
  padding-bottom: 0;
}
.shinian-dayun-title {
  line-height: 96rpx;
}
.shinian-dayun {
  flex-direction: column;
  line-height: 48rpx;
}
.shinian-shishen {
  flex-direction: column;
  line-height: 48rpx;
}

.shiniandayun_explain {
  padding: 8px;
}
.liunian-containter {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.liunian-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 0;
  font-size: 22rpx;
  font-weight: bold;
  line-height: 40rpx;
  color: #4b240d;
  border-left: 2rpx solid #c9c9c9;
}
.liunian-item:last-child {
  margin-right: 44rpx;
  border-right: 2rpx solid #c9c9c9;
}
.fucaixigui-containter {
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding-bottom: 20rpx;
}

.fucaixigui_item {
  display: flex;
  flex-direction: column;
  flex: 1 0;
  font-size: 28rpx;
  line-height: 56rpx;
}

.fucaixigui_title {
  display: flex;
  justify-content: center;
  align-items: center;

  font-weight: bolder;
  color: #808080;
  background-color: #f6f6f6;
}

.fucaixigui_content {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #4b240d;
  font-weight: bolder;
}
</style>